import React from 'react'
import ncss from '../css/navigation.module.css'
// import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
import loadable from "../../loadable"
import { useState, useEffect } from 'react'
import axios from 'axios'
// const all = loadable(() => import('../components/All'))
const Brand = loadable(() => import('../components/Brand.jsx'))
// const Search = loadable(() => import('../components/Search.jsx'))

let Navigation = () => {
    let arr = [
        { type: "全部", name: "all" },
        { type: "数码电器", name: 'shuma' },
        { type: "体育运动", name: 'sport' },
        { type: "家具", name: 'jiaju' },
        { type: "医疗健康", name: 'healthy' },
        { type: "其他", name: "other" },
        { type: "奢侈品", name: 'shechi' },
        { type: "汽车", name: 'car' },
        { type: "美妆个护", name: 'meizhuang' },
        { type: "服饰时尚", name: 'cloth' },
        { type: "宠物", name: 'pet' }];

    const [isShow, setisShow] = useState(0)
    const [myType, setmyType] = useState("全部")
    const [data, setdata] = useState([])

    //切换类型
    let changeType = (type, index) => {
        setisShow(index);
        setmyType(type);
    }

    //根据类型请求数据
    useEffect(() => {
        axios(`/tyj/brand?type=${myType}`).then((res) => {
            setdata(res.data);
            // setlen(res.data.length)
        })
        // console.log(data, 11111111111);
    }, [myType]);

    //搜索框 
    function search(e) {
        if (e.keyCode == 13) {
            if (e.target.value !== "") {
                // console.log(e.target.value!=='');
                axios(`/tyj/search?name=${e.target.value}`).then((res) => {
                    // console.log(res.data, 2222222222);
                    setdata(res.data);
                    e.target.value = ''
                })
            }
        }
    }
    // console.log(data, 333333333333);
    return (
        <div className={ncss.Box}>
            <div className={ncss.search}>
                <input type="text" onKeyDown={(e) => search(e)} placeholder='快速搜索品牌...' />
            </div>
            <div className={ncss.content_style}>
                {arr.map((el, index) => {
                    return <span key={index} onClick={() => { changeType(el.type, index) }} className={isShow === index ? ncss.borderActive : ""}>{el.type}</span>
                })}
            </div>
            <div>
                {/* {searchdata == null ? <Brand mytype={myType}></Brand> : <Search sdata={searchdata}></Search>} */}
                <Brand mydata={data}></Brand>
            </div>
        </div>
    )
}

export default Navigation
